<template>
  <div class=market-show-wrap>
    <div class="market-show col-xs-12">
      <div class="border-bottom1 col-xs-12">
        <ul>
          <span>品类:</span>
          <span>{{customData.parentCategory}}></span>
          <span>{{customData.category}}</span>
        </ul>
        <ul v-if='customData.marketName?customData.marketName:customData.recommendType'>
          <span>市场名称:</span>
          <span>{{customData.marketName?customData.marketName:customData.recommendType}}</span>
        </ul>
      </div>
      <div class="border-bottom1 col-xs-12"
           v-if='customData.obj!=undefined'>
        <p class='label-header'>地理区域</p>
        <ul v-for="(n,key) in customData.obj"
            style="display: flex">
          <div class="item"
               style="margin-right:10px">
            <p style="font-size: 14px;">{{key}}:</p>
          </div>
          <div>
            <span style='display:inline-block;padding:0 20px'
                  v-for="a,index in n "
                  :key="index">{{a}}</span>
          </div>
        </ul>
      </div>
      <div class="border-bottom1 col-xs-12"
           v-if='!(!customData.socialType&&!customData.age&&!customData.income&&!customData.sex&&!customData.education)'>
        <p class='label-header'>社会属性</p>
        <ul v-if='customData.socialType'
            class="col-xs-12">
          <span>{{customData.socialType}}</span>
        </ul>
        <ul class="col-xs-12">
          <p v-if='customData.age'
             class="padding-no col-xs-3 padding-no">
            <span>年龄:</span>
            <span>{{customData.age}}岁</span>
          </p>
          <p v-if='customData.income'
             class="col-xs-3 padding-no">
            <span>收入:</span>
            <span>{{customData.income}}</span>
          </p>
          <p v-if='customData.sex'
             class="col-xs-3 padding-no">
            <span>性别:</span>
            <span>{{customData.sex}}</span>
          </p>
          <p v-if='customData.education'
             class="col-xs-3 padding-no">
            <span>教育程度:</span>
            <span>{{customData.education}}</span>
          </p>
        </ul>
      </div>
      <div class="border-bottom1 col-xs-12"
           v-if='!(!customData.useCycle&&!customData.cost&&!customData.channelType&&!customData.applicationScenarios)'>
        <p class='label-header'>影响购买的行为</p>
        <ul class="col-xs-12">
          <p v-if='customData.useCycle'
             class="col-xs-3 padding-no">
            <span>使用量:</span>
            <span>{{customData.useCycle}}</span>
          </p>
          <p v-if='customData.cost'
             class="col-xs-3 padding-no">
            <span>费用支出:</span>
            <span>{{customData.cost}}</span>
          </p>
          <p v-if='customData.channelType'
             class="col-xs-3 padding-no">
            <span>购买渠道:</span>
            <span>{{customData.channelType}}</span>
          </p>
          <p v-if='customData.applicationScenarios'
             class="col-xs-3 padding-no">
            <span>应用场景:</span>
            <span>{{customData.applicationScenarios}}</span>
          </p>
        </ul>
      </div>
      <div class="border-bottom1 col-xs-12"
           v-if='customData.profitUseCycle'>
        <p class='label-header'>获得销售利润潜力</p>
        <ul class="col-xs-12">
          <p v-if='customData.profitUseCycle'
             class="col-xs-3 padding-no">
            <span>使用量:</span>
            <span>{{customData.profitUseCycle}}</span>
          </p>
          <p v-if='customData.purchaseCount&&customData.frequency'
             class="col-xs-3 padding-no">
            <span>够买频率:</span>
            <span>{{customData.purchaseCount}}/{{customData.frequency}}</span>
          </p>
        </ul>
      </div>
    </div>
    <span slot="footer"
          class="dialog-footer"
          v-if='recommendId'>
      <el-button type="primary"
                 @click="ok()"
                 style="width: 100px;height: 40px;margin: 50px 20px 20px 0">确 定</el-button>
      <el-button @click="$emit('close',false)"
                 style="width: 100px;height: 40px;margin: 50px 0 20px 0">取 消</el-button>
    </span>
  </div>

</template>
<script>
export default {
  props: {
    singleId: "",
    recommendId: ""
  },
  data () {
    return {
      customData: {
        id: "",
        marketName: "",
        marketType: "",
        parentCategory: "",
        category: "",
        categoryId: "",
        parentCategoryId: "",
        region: "",
        province: null,
        socialType: "",
        age: "",
        income: "",
        sex: "",
        education: "",
        useCycle: null,
        cost: "",
        channelType: "",
        applicationScenarios: "",
        profitUseCycle: "",
        frequency: "",
        purchaseCount: "",
        optLock: "",
        mark: "",
        creator: null
      },
      regionCheckList1: [],
    };
  },
  computed: {},
  created () { },
  mounted () {
    console.log(this.recommendId);
    if (this.singleId) {
      this.getDictionary("市场罗盘_地理区域", res => {
        this.regionCheckList1 = res;
        let singleId = this.singleId;
        this.obtinMarket(singleId);
      });
    } else if (this.recommendId) {
      this.getDictionary("市场罗盘_地理区域", res => {
        this.regionCheckList1 = res;

        let recommendId = this.recommendId;
        this.obtinRecommendMarket(recommendId);
      });
    }
  },
  methods: {
    //获取二级城市
    returnSubCity (n) {
      return this.regionCheckList1.subDictionary[`id_${n.id}`];
    },
    obtinMarket (id) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOneMarketTrends",
          query: {
            id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data.province);
            if (res.data.data.province == null) {
              this.customData = res.data.data;

              console.log(this.customData.obj);

              return;
            }
            let pro = res.data.data.province.split(",");
            let reg = this.regionCheckList1;
            let obj = {};
            for (let i in pro) {
              for (let a in reg.subDictionary) {
                for (let c in reg.subDictionary[a]) {
                  if (pro[i] == reg.subDictionary[a][c].entry) {
                    let id = a;
                    for (let b in reg.dictionary) {
                      let ids = "id_" + reg.dictionary[b].id;
                      if (ids == id) {
                        let name = reg.dictionary[b].entry;
                        console.log(id, name);

                        if (obj[name] instanceof Array === false) {
                          obj[name] = [];
                        }
                        obj[name].push(pro[i]);
                      }
                    }
                  }
                }
              }
            }
            console.log(obj)
            res.data.data.obj = obj;
            this.customData = res.data.data;
            console.log(this.customData.obj);
            // if(!this.customData.obj){
            //   console.log(67890)
            // }
          }
        })
        .catch(error => { });
    },
    obtinRecommendMarket (id) {
      console.log(id);
      this.$http
        .post(this.GLOBAL.host, {
          method: "getOneRecommendMarket",
          query: {
            id
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            console.log(res.data.data.province);
            if (res.data.data.province == null) {
              this.customData = res.data.data;
              console.log(this.customData.obj);
              return;
            }
            let pro = res.data.data.province.split(",");
            let reg = this.regionCheckList1;
            let obj = {};

            for (let i in pro) {
              for (let a in reg.subDictionary) {
                for (let c in reg.subDictionary[a]) {
                  if (pro[i] == reg.subDictionary[a][c].entry) {
                    let id = a;
                    for (let b in reg.dictionary) {
                      let ids = "id_" + reg.dictionary[b].id;
                      if (ids == id) {
                        let name = reg.dictionary[b].entry;
                        if (obj[name] instanceof Array === false) {
                          obj[name] = [];
                        }
                        obj[name].push(pro[i]);
                      }
                    }
                  }
                }
              }
            }
            console.log(obj);
            res.data.data.obj = obj;
            this.customData = res.data.data;
            console.log(this.customData.obj);
            // if(!this.customData.obj){
            //   console.log(67890)
            // }
          }
        })
        .catch(error => { });
    },
    //获取数据字典
    getDictionary (cnName, callback) {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getDictionary",
          query: { cnName: cnName }
        })
        .then(res => {
          if (res.data.data.dictionary == undefined) return;
          console.log(res.data.data);
          callback(res.data.data);
        })
        .catch(error => { });
    },
    ok () {
      //这里要做判断，是推荐市场还是自定义市场。
      console.log(this.customData)
      this.$http
        .post(this.GLOBAL.host, {
          method: "addMarketTrends",
          data: {
            marketName: this.customData.recommendType,
            marketType: "推荐",
            categoryId: this.customData.categoryId,
            region: this.customData.region,
            province: this.customData.province,
            socialType: this.customData.socialType,
            age: this.customData.age,
            income: this.customData.income,
            sex: this.customData.sex,
            education: this.customData.education,
            useCycle: this.customData.useCycle,
            cost: this.customData.cost,
            channelType: this.customData.channelType,
            applicationScenarios: this.customData.applicationScenarios,
            profitUseCycle: this.customData.profitUseCycle,
            frequency: this.customData.frequency,
            purchaseCount: this.customData.purchaseCount,
            creator: this.$store.state.user.id,
          }
        })
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              message: "推荐市场添加成功",
              type: "success"
            });
            //刷新首页
            this.getData();
            this.$emit("close");

          } else {
            this.$message({
              message: '添加失败',
              type: 'error'
            });
          }
        })
        .catch(error => { });
    },
    // 市场机会
    getData () {
      this.$http
        .post(this.GLOBAL.host, {
          method: "getMarketTrends",
          query: {
            // categoryId: this.cateValue == 0 ? "" : this.cateValue,
            // marketType: this.allCateValue == "全部" ? "" : this.allCateValue,
            // marketName: this.conValue,
            // pageNo: this.page,
            pageSize: 10,
            creator: this.$store.state.user.id,
          }
        })
        .then(res => {
          console.log(1);
          let marketData = res.data.data.list;

          this.datas = marketData;
          this.totalPage = res.data.data.total;
        })
        .catch(error => { });
    }
  },
  watch: {
    checkedCities1 (e) {
      console.log(e);
      this.getArea(e);
    }
  }
};
</script>
<style lang="less" scoped>
.market-show-wrap {
  background: #fff;
  .dialog-footer {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .border-bottom1 {
    padding-bottom: 20px;
    padding-top: 20px;
    width: 95%;
    border-bottom: 1px solid #dee5eb;
    margin: auto;
    .label-header {
      margin-bottom: 10px;
      color: #73828e;
      font-size: 16px;
    }
    ul {
      p {
        line-height: 40px;
      }
      span {
        line-height: 40px;
      }
    }
  }
  .padding-no {
    padding: 0;
  }
}

// .custom-but{
//     position: fixed;
//     bottom: 20px;
// }
</style>
<style lang="less" >
.market-show-wrap {
  .el-dialog {
    background: #e8eef4;
    position: relative;
  }
}
</style>
